<template>
  <el-card>
    <div class="card-header">
      <span>入库发票汇总</span>
    </div>
  </el-card>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="2">
        <perms-button
            perms="inbound_invoice:summary:list"
            :type="Types.success"
            :plain="true"
            @action="refresh"/>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="card card-invoice">
          <template #header>
            汇总
          </template>
          <div class="content-between">
            <div class="content-column">
              <div><label class="content-column-title">发票总金额</label><span class="content-column-data">{{ invoiceSummary?.total }}</span> 元</div>
              <el-divider />
              <div><label class="content-column-title">已开票金额</label><span class="content-column-data">{{ invoiceSummary?.used }}</span> 元</div>
              <el-divider />
              <div><label class="content-column-title">可用发票金额</label><span class="content-column-data">{{ invoiceSummary?.available }}</span> 元</div>
            </div>
            <div class="content-column">
              <div><span class="content-column-title">发票总税额</span><span class="content-column-data">{{ invoiceSummary?.total_tax }}</span> 元</div>
              <el-divider />
              <div><span class="content-column-title">已开票税额</span><span class="content-column-data">{{ invoiceSummary?.used_tax }}</span> 元</div>
              <el-divider />
              <div><span class="content-column-title">可用税额</span><span class="content-column-data">{{ invoiceSummary?.available_tax }}</span> 元</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider>供货商发票列表</el-divider>
    <el-row :gutter="20">
      <el-col :span="12" v-for="item in invoiceList">
        <el-card class="card card-supplier">
          <template #header>
            {{ item.supplier_name }}
          </template>
          <div class="content-between">
            <div class="content-column">
              <div><label class="content-column-title">发票总金额</label><span class="content-column-data">{{ item?.total }}</span> 元</div>
              <el-divider />
              <div><label class="content-column-title">已开票金额</label><span class="content-column-data">{{ item?.used }}</span> 元</div>
              <el-divider />
              <div><label class="content-column-title">可用发票金额</label><span class="content-column-data">{{ item?.available }}</span> 元</div>
            </div>
            <div class="content-column">
              <div><span class="content-column-title">发票总税额</span><span class="content-column-data">{{ item?.total_tax }}</span> 元</div>
              <el-divider />
              <div><span class="content-column-title">已开票税额</span><span class="content-column-data">{{ item?.used_tax }}</span> 元</div>
              <el-divider />
              <div><span class="content-column-title">可用税额</span><span class="content-column-data">{{ item?.available_tax }}</span> 元</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
        class="page"
        v-model:current-page="listForm.page"
        v-model:page-size="listForm.size"
        :page-sizes="[30, 40, 50, 100]"
        :disabled="loading"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="list"
        @current-change="list"
    />
  </el-card>
</template>

<script setup lang="ts">
//1.统计发票汇总数据
import {InboundInvoiceSummaryListR, InboundInvoiceSummaryR} from "@/api/inbound_invoice";
import {ElMessage} from "element-plus";
import {InboundInvoiceSummaryListRequest, InboundInvoiceSummary} from "@/interface/inbound_invoice";
import {onMounted, ref} from "vue";
import PermsButton from '@/components/PermsButton.vue'
import {Types} from "@/interface/enum";
//分页参数
const listForm = ref<InboundInvoiceSummaryListRequest>({page:1, size:10, supplier_name:''})
const loading = ref<boolean>(false)

//入库发票汇总
const invoiceSummary = ref<InboundInvoiceSummary>()
const invoiceList = ref<InboundInvoiceSummary[]>()
const total = ref<number>(0)

const summary = () => {
  loading.value = true
  InboundInvoiceSummaryR().then(res => {
    loading.value = false
    return res.data
  }).then(res => {
    switch (res.code) {
      case 200:
        invoiceSummary.value = res.data
        break
      case 204:
        invoiceSummary.value = initInvoiceSummary()
        break
      default:
        //ElMessage.error(res.msg)
    }
  }).catch(err => {
    loading.value = false
    console.log('err:', err.toString())
    ElMessage.error('请求发票汇总数据失败')
  })
}

const list = () => {
  loading.value = true
  InboundInvoiceSummaryListR(listForm.value).then(res => {
    loading.value = false
    return res.data
  }).then(res => {
    switch (res.code) {
      case 200:
        invoiceList.value = res.data.list
        total.value = res.data.total
        break
      case 204:
        invoiceList.value = []
        break
      default:
        //ElMessage.error(res.msg)
    }
  }).catch(err => {
    loading.value = false
    console.log('err:', err.toString())
    ElMessage.error('请求供货商发票汇总数据失败')
  })
}

const initListForm = () => {
  return <InboundInvoiceSummaryListRequest>{
    page: 1,
    size: 10,
    supplier_name: '',
  }
}

const initInvoiceSummary = () => {
  return <InboundInvoiceSummary>{
    total: 0,
    total_tax: 0,
    available: 0,
    available_tax: 0,
    used: 0,
    used_tax: 0,
  }
}

//刷新所有接口
const refresh = () => {
  summary()
  list()
}

onMounted(() => {
  refresh()
})

</script>

<style lang="less" scoped>
.el-card {
  margin-bottom: 20px;
}
.el-row {
  margin-bottom: 20px;
}

.card {
  min-height: 200px;
  color: white;
}

.card-invoice {
  background-color: #8683bd;
}

.card-supplier {
  background-color: #79bbff;
}

.content-between{
  display: flex;
  justify-content: space-between;
}
.content-column {
  display: flex;
  flex-direction: column;
  //justify-content: space-between;


  &-title {
    //font-size: 16px;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    width: 100px;
    padding-right: 10px;
  }
  &-data {
    font-size: 28px;
    //margin-left: 80px;
  }

}
</style>
